import React, { PureComponent } from "react";
import { Row, Col, Input, Icon, Button, Divider, notification } from "antd";
import { Link } from "react-router-dom";
import Req from "../common/Req";
import * as $ from "jquery";

export default class LoginPage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
  }
  render() {
    return (
      <div
        style={{
          height: 400,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center"
        }}
      >
        <Row type="flex" align="center">
          <Col span={18}>
            <div style={{ textAlign: "center" }}>
              <img
                src={require("../imgs/one.png")}
                alt=""
                style={{ width: 400 }}
              />
            </div>
          </Col>
          <Col span={6}>
            <div
              style={{
                textAlign: "center",
                background: "#ffffff",
                padding: 20
              }}
            >
              <h1 style={{ color: "#0278ae" }}>LOGIN</h1>
              <Divider />
              <Input
                placeholder="username"
                addonBefore={<Icon type="user" />}
                onChange={e => this.setState({ username: e.target.value })}
              />
              <Input
                style={{ marginBottom: 10, marginTop: 10 }}
                placeholder="password"
                type="password"
                addonBefore={<Icon type="lock" />}
                onChange={e => this.setState({ password: e.target.value })}
              />
              <Divider />
              <div>
                <Button
                  type="primary"
                  onClick={
                    () =>
                      $.ajax({
                        url: "http://localhost:8080/user/login",
                        type: "POST",
                        data: { username: "user", password: "pwd" },
                        success: data => {
                          data.data.loginState === "SUCCESS"
                            ? this.props.history.push("/retailers/")
                            : notification["error"]({
                                message: "登陆失败",
                                description: `原因：${data.data.loginState}`
                              });
                        }
                      })

                    // Req(
                    //   "http://localhost:8080/user/login",
                    //   {
                    //     method: "POST",
                    //     headers: {
                    //       "Content-type": "application/json"
                    //     },
                    //     body: JSON.stringify(this.state)
                    //   },
                    //   this.props.history,
                    //   resp =>
                    //     resp.data.loginState === "SUCCESS"
                    //       ? this.props.history.push("/retailers")
                    //       : notification["error"]({
                    //           message: "登陆失败",
                    //           description: `原因：${resp.data.loginState}`
                    //         })
                    // )
                  }
                >
                  登陆
                </Button>
                <Link to="/retailers/regist" style={{ marginLeft: 10 }}>
                  没有账号？点击注册
                </Link>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
